<template>
  <view class="container">
    <!-- 替换组件的搜索图标 -->
    <uni-search-bar placeholder="搜索圈子" @input="SearchInput">
      <image class="searchImage" slot="searchIcon" src="/static/images/mine/sear.png" mode="widthFix"></image>
    </uni-search-bar>
    <!-- v-if="searchList.length !== 0" -->
    <view v-if="searchList.length !== 0" class="popup_box">
      <view class="popup_title">
        <block v-for="(item,i) in searchList" :key="i">
          <van-cell :border="false" :title="item.categoryName" @click="onsearchItem(item)"></van-cell>
        </block>
      </view>
    </view>

    <view class="searnav">
      <view class="scroll-view-container">
        <!-- 左侧的滚动视图区域 -->
        <scroll-view class="left-scroll-view" scroll-y :style="{height: wh - 52 + 'px'}">
          <block v-for="(item,i) in animalList" :key="i">
            <view :class="['left-scroll-view-item', i === active ? 'active' : '']" @click="activeChanged(i)">
              {{item.title}}
            </view>
          </block>
        </scroll-view>
        <!-- 右侧的滚动视图区域 -->
        <scroll-view class="right-scroll-view" scroll-y :style="{height: wh - 52 + 'px'}">
          <view class="right-scroll-box">
            <block v-for="(item,i) in cateLevel2" :key="i">
              <view class="right-scroll-box-item" @click="circleSelect(item)">
                <view class="right-scroll-box-item-left">
                  <view class="Image">
                    <image :src="item.icon" mode="aspectFill"></image>
                  </view>
                  <view class="Title">
                    <h1>{{item.title}}</h1>
                    <text>{{item.joiners}}人加入</text>
                  </view>
                </view>
                <view class="right-scroll-box-item-right">
                  加入
                </view>
              </view>
            </block>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
  import {} from '@/api/user.js'
  import {
    getstructure,
    getSearhstructure
  } from '@/api/comment.js'
  export default {
    data() {
      return {
        // 当前选中项的索引，默认让第一项被选中
        active: 0,
        wh: 0,
        typeCircle: '',
        animalList: [],
        cateLevel2: [],
        searchList: []
      };
    },
    onLoad(option) {
      this.typeCircle = option.type
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 wh 窗口可用高度动态赋值
      this.wh = sysInfo.windowHeight
      this.Pettypeall()
    },
    methods: {
      // 选中项改变的事件处理函数
      activeChanged(i) {
        let app = getApp();
        this.active = i
        // 为二级分类列表重新赋值
        this.cateLevel2 = this.animalList[i].children
      },
      // 跳转
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      SearchInput(e) {
        // console.log(e)
        if (e !== '') {
          getSearhstructure(e).then(res => {
            // console.log(res)
            this.searchList = res.data
          })
        } else {
          this.searchList = []
        }
      },
      Pettypeall() {
        let app = getApp();
        // console.log(app.globalData.animalList)
        app.globalData.animalList.forEach(x => {
          x.categoryType.forEach(item => {
            if(item == 3) {
              this.animalList.push(x)
            }
          })
        })
        // console.log(this.animalList)
        // 为二级分类赋值
        if(this.animalList.length != 0) {
          this.cateLevel2 = this.animalList[0].children
        }
      },
      onsearchItem(item) {
        console.log(item)
        if (this.typeCircle) {
          let pages = getCurrentPages(); //获取所有页面栈实例列表
          // console.log(pages)
          let prevPage = pages[pages.length - 2]; //上一页页面实例
          // console.log(item)
          prevPage.$vm.circleselectName = item.categoryName
          prevPage.$vm.circleId = item.id
          uni.navigateBack()
        } else {
          this.navTo('/subpkg/petInfo/petInfo?id=' + item.id)
        }
      },
      circleSelect(item) {
        if (this.typeCircle) {
          let pages = getCurrentPages(); //获取所有页面栈实例列表
          // console.log(pages)
          let prevPage = pages[pages.length - 2]; //上一页页面实例
          // console.log(item)
          prevPage.$vm.circleselectName = item.title
          prevPage.$vm.circleId = item.id
          uni.navigateBack()
        } else {
          this.navTo('/subpkg/petInfo/petInfo?id=' + item.id)
        }
      }
    }
  }
</script>

<style lang="scss">
  /deep/ .van-cell {
    padding-top: 35rpx !important;
    padding-bottom: 35rpx !important;
    align-items: center;
    width: 100% !important;
    background-color: transparent !important;

    /deep/ .van-cell__title {
      font-size: 34rpx;
      line-height: 64rpx;
    }
  }

  /deep/ .uni-searchbar {
    position: relative;
    z-index: 5;
  }

  .container {

    position: relative;

    .searchImage {
      position: relative;
      z-index: 5;
      width: 38rpx;
      height: 38rpx;
    }

    .popup_box {
      position: absolute;
      top: 86rpx;
      width: 100%;
      z-index: 2;
      padding: 0 92rpx 20rpx 17rpx;
      box-sizing: border-box;

      .popup_title {
        padding: 20rpx 25rpx;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
        background-color: #fff;
        // width: 100%;
        box-shadow: 0px 0px 20rpx 3rpx rgba(0, 0, 0, 0.04);
      }
    }

    .searnav {
      padding: 15rpx;

      .scroll-view-container {
        display: flex;

        .left-scroll-view {
          width: 240rpx;
          border: 2rpx solid rgba(237, 237, 237, 0.5);

          .left-scroll-view-item {
            line-height: 96rpx;
            height: 96rpx;
            background-color: #ffffff;
            text-align: center;
            font-size: 32rpx;
            color: rgba(61, 61, 61, 0.75);

            // 激活项的样式
            &.active {
              background-color: rgba(237, 237, 237, 1);
              position: relative;
              color: rgba(61, 61, 61, 1);
            }
          }
        }

        .right-scroll-view {
          .right-scroll-box {
            height: 100rpx;
            padding: 0 24rpx;

            .right-scroll-box-item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 44rpx;

              .right-scroll-box-item-left {
                display: flex;

                .Image {
                  width: 100rpx;
                  height: 100rpx;
                  border-radius: 10rpx;
                  overflow: hidden;

                  image {
                    width: 100%;
                    height: 100%;
                  }
                }

                .Title {
                  height: 100rpx;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  margin-left: 22rpx;

                  h1 {
                    color: rgba(61, 61, 61, 1);
                    font-size: 26rpx;
                  }

                  text {
                    color: rgba(61, 61, 61, 0.5);
                    font-size: 22rpx;
                  }
                }
              }

              .right-scroll-box-item-right {
                width: 128rpx;
                height: 52rpx;
                background-color: rgba(253, 211, 56, 1);
                border-radius: 26.5rpx;
                text-align: center;
                line-height: 52rpx;
                color: rgba(51, 51, 51, 1);
                font-size: 26rpx;
              }
            }
          }
        }
      }
    }
  }
</style>
